<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 标题 -->
      <div slot="header" class="clearfix">
        <span class="active">楼栋管理</span>
      </div>
      <!-- 添加按钮 -->
      <el-row :gutter="10" class="btns">
        <el-button v-if="power.includes('添加楼栋')" @click="dialogVisible = true" type="success" class="searchbtn" size="small">添加 </el-button>
      </el-row>
      <!-- 树形组件 -->
      <div class="tree_container">
        <el-tree v-loading="loading" :data="data" show-checkbox node-key="id" :props="defaultProps" :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="success" size="mini" @click="addBuilding(data)"> 添加子节点 </el-button>
              <el-button type="primary" size="mini" @click="() => handleEdit(data)"> 修改 </el-button>
              <el-button type="danger" size="mini" @click="() => handleDelete(data)"> 删除 </el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </el-card>
    <!-- 添加 -->
    <DialogBuilding
      :isTop="isTop"
      :parentData="parentData"
      :dialogVisible="dialogVisible"
      :editData="editData"
      @refreshList="refreshList"
      @handleCancel="handleCancel"
      :isEdit="isEdit"
    >
    </DialogBuilding>
  </div>
</template>
<script>
import { miXinPower } from '@/utils/miXinPower'
import { list,del } from '@/api/building'
import DialogBuilding from '@/components/DialogBuilding.vue'
export default {
  name: 'BuildingView',
  mixins: [miXinPower],
  components: {
    DialogBuilding,
  },
  data() {
    return {
      dialogVisible: false,
      loading: true,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id',
      },
      isTop: true,
      parentData: {},
      isEdit: false,
      editData: {},
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleEdit(data) {
    //   console.log('data', data)
      this.editData = data
      if (data.pid) {
        this.isTop = false
        this.parentData = this.getParentData(data.pid)
      }
      this.isEdit = true
      this.dialogVisible = true
    },
    getParentData(id) {
      console.log('id', id, this.data)
      let data = []
      function getParent(array) {
        array.forEach((item) => {
          if (item.id == id) {
            data = item
          }
          if (item.children && item.children.length > 0) {
            getParent(item.children)
          }
        })
      }
      getParent(this.data)
      return data
    },
        async handleDelete(row) {
      try {
        await this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        await del({ id: row.id });
        await this.getList();
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      } catch (error) {
        if (error === "cancel") {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        } else {
          console.error("删除失败:", error);
        }
      }
    },
    refreshList() {
      this.dialogVisible = false
      this.isTop = true
      this.isEdit = false
      this.parentData = {}
      this.editData = {}
      this.getList()
    },
    addBuilding(data) {
      console.log('data', data)
      this.parentData = data //父级数据
      this.dialogVisible = true
      this.isTop = false
      this.isEdit = false
    },
    handleCancel(dialogVisible) {
      this.isTop = true
      this.isEdit = false
      this.parentData = {}
      this.editData = {}
      this.dialogVisible = dialogVisible
    },
    async getList() {
      this.loading = true
      let {
        data: { list: listData },
      } = await list(this.query)
      console.log('res', listData)
      this.data = listData
      // 关闭loading
      this.loading = false
    },
    handleNodeClick(data) {
      console.log(data)
    },
  },
}
</script>
<style lang="less" scoped>
.tree_container {
  padding: 20px 0px;
  width: 60%;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

/deep/.el-tree-node__content {
  height: 40px !important;
}
</style>
